<template>
	<view class="columnbox wdh-100 content">
		<view class="rowbox wdh-100 search-box">
			<view class="rowbox search-info spb" @click="searchDoctorIndex">
				<view class="rowbox">
					<u-icon name="search" size="40rpx"></u-icon>
					<view style="margin-left: 25rpx;color: #939597 ;">搜索疾病/医院/姓名找医生</view>
				</view>
				<view class="rowbox search-btn">搜索</view>
			</view>
		</view>
		<!-- 科室 -->
		<view class="rowbox one-box spb">
			<view class="columnbox left-box" @click="showKeshi(0)">
				<view class="left-title">按科室找</view>
				<view class="left-second">覆盖94个科室</view>
				<view class="left-btn">去找专家</view>
			</view>
			<scroll-view scroll-x class="scroll-box" v-if="keshi.length>0">
				<view class="keshi-list">
					<view class="columnbox als ">
						<view class="rowbox">
							<view class="rowbox one-keshi" @click="chooseItem('keshiid',item)"
								v-for="(item,index) in keshi.slice(0,Math.floor(keshi.length / 2))" :key='index'>
								<image :src="item.image" mode="widthFix"></image>
								{{item.name}}
							</view>
						</view>
						<view class="rowbox">
							<view class="rowbox one-keshi" @click="chooseItem('keshiid',item)"
								v-for="(item,index) in keshi.slice(Math.floor(keshi.length / 2),keshi.length)"
								:key='index'>
								<image :src="item.image" mode="widthFix"></image>
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 疾病 -->
		<view class="rowbox one-box spb">
			<view class="columnbox left-box jb-box" @click="showKeshi(1)">
				<view class="left-title">按疾病找</view>
				<view class="left-second">覆盖868个疾病</view>
				<view class="left-btn jb-btn">去找专家</view>
			</view>
			<scroll-view scroll-x class="scroll-box" v-if="jibing.length>0">
				<view class="keshi-list">
					<view class="columnbox als ">
						<view class="rowbox">
							<view class="rowbox one-jibing" @click="chooseItem('jibingid',item)"
								v-for="(item,index) in jibing.slice(0,Math.floor(jibing.length / 2))" :key='index'>
								{{item.name}}
							</view>
						</view>
						<view class="rowbox">
							<view class="rowbox one-jibing" @click="chooseItem('jibingid',item)"
								v-for="(item,index) in jibing.slice(Math.floor(jibing.length / 2),jibing.length)"
								:key='index'>
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 医院 -->
		<!-- <view class="rowbox one-box spb" @click="searchDoctor">
			<view class="columnbox left-box yy-box">
				<view class="left-title">按医院找</view>
				<view class="left-second">1263 三甲医院</view>
				<view class="left-btn yy-btn">去找专家</view>
			</view>
			<scroll-view scroll-x class="scroll-box">
				<view class="keshi-list">
					<view class="one-yy" v-for="(item,index) in yiyuan" :key='index'>
						<view class="columnbox yy-info">
							<view class="rowbox">
								<u-icon name="map" color="#b7b8b9" size="28rpx"></u-icon>
								<view class="yy-name">{{item.name}}</view>
							</view>
							<view class="yy-desc">{{item.desc}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view> -->
		<!-- <view class="ys-box columnbox">
			<view class="rowbox wdh-100 spb">
				<view class="info-title">推荐医生</view>
				<view class="all-btn rowbox" @click="searchDoctor">查看全部 <u-icon color="#959499" name="arrow-right"
						size="28rpx"></u-icon>
				</view>
			</view>
			<view @click="sohowDetail(item.id)" class="rowbox wdh-100 one-ys als" v-for="(item,index) in doctorList"
				:key='index'>
				<image :src="item.logo" mode="aspectFill" class="ys-img"></image>
				<view class="columnbox als  ys-info">
					<view class="ys-name">{{item.name}} <text>医师</text> </view>
					<view class="rowbox yy-detail">
						<view>{{item.keshi}}</view>
						<text> | </text>
						<view>{{item.jigou}}</view>
					</view>
					<view class="wdh-100 ys-sc">擅长：{{item.sljb}}</view>
				</view>
			</view>
		</view> -->
		<!-- 瀑布流 -->
		<newsBox ref="news" class="wdh-100"></newsBox>
	</view>
</template>

<script>
	import newsBox from './news/news'
	export default {
		components: {
			newsBox
		},
		data() {
			return {
				logflag: false,
				keshi: [],
				jibing: [],
				yiyuan: [{
						name: '江苏',
						desc: '附近好医院'
					},
					{
						name: '全国',
						desc: '百强医院榜'
					},
					{
						name: '全国',
						desc: '百强医院榜'
					}
				],
				doctorList: []
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user;
			},
			isLogin() {
				return this.$store.state.isLogin;
			},
		},
		onReachBottom() {
			this.$refs.news.loadMoreData()
		},
		async onLoad(options) {
			await this.$onLaunched;
			console.log('==optionsoptions=', options)
			if (options.state) {
				this.getCode(options)
			}
			// await this.$onLaunched;
			this.getKeshi()
			this.getJibing()
			// this.getDoctor()
		},
		onShow() {

		},
		methods: {
			getCode(options) {
				uni.showLoading({
					title: '加载中'
				})
				if (uni.getStorageSync('uid')) {
					if (options.state == 1) {
						if (uni.getStorageSync('uid') == 0) {
							uni.navigateTo({
								url: '/pages/editinfo/editinfo?state=' + options.state +
									'&id=' + options.id * 1
							})
							return false
						}
						this.$req.post('/user/goodorderbd', {
							id: options.id * 1,
							userid: uni.getStorageSync('uid')
						}).then(res => {
							uni.hideLoading()
							uni.navigateTo({
								url: '/packageA/chatInfo/goods?id=' + options.id
							})
						})
					} else if (options.state == 2) {
						if (uni.getStorageSync('uid') == 0) {
							uni.navigateTo({
								url: '/pages/editinfo/editinfo?state=' + options.state +
									'&id=' + options.id * 1
							})
							return false
						}
						this.$req.post('/user/yaofangxybd', {
							id: options.id * 1,
							userid: uni.getStorageSync('uid')
						}).then(res => {
							uni.hideLoading()
							uni.navigateTo({
								url: '/packageA/chatInfo/xiyao?type=xiyao&id=' +
									res.data.data
							})
						})

					} else if (options.state == 3) {
						if (uni.getStorageSync('uid') == 0) {
							uni.navigateTo({
								url: '/pages/editinfo/editinfo?state=' + options.state +
									'&id=' + options.id * 1
							})
							return false
						}
						this.$req.post('/user/patientadd', {
							id: options.id * 1,
							uid: uni.getStorageSync('uid')
						}).then(res => {
							uni.hideLoading()
							uni.navigateTo({
								url: '/pages/doctor/detail?id=' +
									options.id * 1
							})
							// this.$req.post('/user/siyu', {
							// 	id: options.id * 1,
							// 	uid: uni.getStorageSync('uid')
							// }).then(res => {})
						})

					} else if (options.state == 4) {
						if (uni.getStorageSync('uid') == 0) {
							uni.navigateTo({
								url: '/pages/editinfo/editinfo?state=' + options.state +
									'&id=' + options.id * 1
							})
							return false
						}
						this.$req.post('/user/yaofangzybd', {
							id: options.id * 1,
							userid: uni.getStorageSync('uid')
						}).then(res => {
							uni.navigateTo({
								url: '/packageA/chatInfo/zhongyao?id=' +
									res.data.data
							})
							uni.hideLoading()
						})

					} else if (options.state == 5) {
						// if (uni.getStorageSync('uid') == 0) {
						// 	uni.navigateTo({
						// 		url: '/pages/editinfo/editinfo?state=' + options.state +
						// 			'&id=' + options.id * 1
						// 	})
						// 	return false
						// }
						uni.navigateTo({
							url: '/pages/editinfo/editinfo?state=' + options.state +
								'&id=' + options.id * 1
						})
						return false
					}

				} else {
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/editinfo/editinfo?state=' + options.state + '&id=' + options.id
					})
				}
			},
			chooseItem(type, v) {
				uni.navigateTo({
					url: `/pages/doctor/doctor?type=${type}&id=${v.id}&name=${v.name}`
				})
			},
			getDoctor() {
				this.$req.post('/user/doctorindex', {
					pageNo: 1,
					pageSize: 20
				}).then(res => {
					this.doctorList = res.data.data.data
				})
			},
			searchDoctorIndex() {
				uni.navigateTo({
					url: '/pages/doctor/doctor?from=index'
				})
			},
			searchDoctor() {
				uni.navigateTo({
					url: '/pages/doctor/doctor'
				})
			},
			// 科室
			showKeshi(v) {
				if (this.isLogin) {
					this.$isEditInfo()
					uni.navigateTo({
						url: '/pages/keshi/keshi?type=' + v + '&to=doctor'
					})
				} else {
					this.$toLog()
				}
			},
			getKeshi() {
				this.$req.post('/user/keshiindex').then(res => {
					this.keshi = res.data.data
				})
			},
			getJibing() {
				this.$req.post('/user/jibingindex').then(res => {
					this.jibing = res.data.data
				})
			},
			sohowDetail(id) {
				uni.navigateTo({
					url: '/pages/doctor/detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F5F8FB;
		justify-content: flex-start;
		font-family: PingFang SC;
	}

	.search-box {
		padding: 32rpx 36rpx;
		background: #fff;

		.search-info {
			width: 100%;
			height: 70rpx;
			border: #00b6b2 solid 1px;
			border-radius: 100rpx;
			padding-left: 20rpx;
			font-size: 26rpx;
		}

		.search-btn {
			width: 110rpx;
			height: 50rpx;
			background: linear-gradient(to right, #01a7a1, #5acbc1);
			border-radius: 100rpx;
			font-size: 26rpx;
			color: #fff;
			margin-right: 10rpx;
		}
	}

	.one-box {
		width: 710rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background: #fff;
		margin-top: 20rpx;

		.left-box {
			background: #7690e7;
			width: 200rpx;
			height: 200rpx;
			color: #fff;
		}

		.jb-box {
			background: #ff783e;
		}

		.yy-box {
			background: #00bfb9;
		}

		.left-title {
			font-size: 28rpx;
		}

		.left-second {
			font-size: 24rpx;
		}

		.left-btn {
			color: #7690e7;
			background: #fff;
			padding: 10rpx 20rpx;
			border-radius: 100rpx;
			font-size: 24rpx;
			margin-top: 10rpx;
			line-height: 24rpx;
			transform: scale(0.9);
		}

		.jb-btn {
			color: #ff6c28;
		}

		.yy-btn {
			color: #00c3bd;
		}

		.scroll-box {
			width: calc(100% - 200rpx);
			white-space: nowrap;
		}

		.keshi-list {
			display: inline-block;
		}

		.one-keshi {
			font-size: 28rpx;
			padding: 0 20rpx;
			border-right: #F5F8FB solid 1px;
			margin: 25rpx 0;
			width: 190rpx;
			justify-content: flex-start;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		.one-jibing {
			font-size: 28rpx;
			background: #fffaf6;
			width: 150rpx;
			height: 67rpx;
			margin: 10rpx 20rpx;
			border-radius: 10rpx;
		}

		.one-yy {
			display: inline-block;
			background: #fafcfb;
			width: 200rpx;
			height: 150rpx;
			border-radius: 10rpx;
			margin-left: 20rpx;
		}

		.yy-info {
			width: 200rpx;
			height: 150rpx;

			.yy-name {
				font-size: 28rpx;
				margin-left: 10rpx;
			}

			.yy-desc {
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}

	.ys-box {
		background: #fff;
		width: 710rpx;
		margin-top: 20rpx;
		padding: 32rpx 32rpx;
		border-radius: 20rpx;

		.info-title {
			font-size: 32rpx;
			margin-bottom: 40rpx;
		}

		.all-btn {
			font-size: 28rpx;
			color: #959499;
		}

		.one-ys {
			margin-bottom: 40rpx;
			justify-content: space-between;
			border-bottom: #F5F8FB solid 1px;
			padding-bottom: 40rpx;

			.ys-img {
				width: 90rpx;
				height: 90rpx;
				border-radius: 100rpx;
			}

			.ys-info {
				width: calc(100% - 110rpx);
			}

			.ys-name {
				font-size: 32rpx;

				text {
					font-size: 28rpx;
					margin-left: 20rpx;
					color: #959499;
				}
			}

			.yy-detail {
				font-size: 28rpx;
				margin-top: 10rpx;

				text {
					margin: 0 10rpx;
				}
			}

			.ys-sc {
				font-size: 24rpx;
				margin-top: 10rpx;
				color: #959499;
			}
		}
	}
</style>